<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单展示</title>
    <link rel="stylesheet" href="/js/bootstrap.min.css">
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var order = $("#order");
            var pageNo = 1;//页数
            var total = null;//最大页数
            var status = null;//订单状态
            var ids = null;//订单编号

            //设置首页
            $("#first").click(function () {
                pageNo = 1;
                show();
            });

            //设置上一页
            $("#prev").click(function () {
                if (pageNo <= 1)
                    return;
                pageNo--;
                show();
            });

            //设置下一页
            $("#next").click(function () {
                if (pageNo >= total)
                    return;
                pageNo++;
                show();
            });

            //设置尾页
            $("#last").click(function () {
                pageNo = total;
                show();
            });

            //点击事件
            $("#button").click(function () {
                status = $("input[type='radio']:checked").val() == null ? "" : $("input[type='radio']:checked").val();
                pageNo = 1;
                show();
                return false;
            });

            //Ajax展示
            function show() {
                order.find("tr:gt(0)").remove();
                $.get("/applets/order/page", {"status": status, "pageNo": pageNo, "pageSize": 5}, function (da) {
                    if (da.code != 0) {
                        alert(da.msg);
                        return;
                    }
                    var res = da.data;
                    total = res.total;
                    $.each(res.list, function (i, d) {
                        order.append("<tr><td>" + d.id + "</td><td>" + d.prodid + "</td><td>" + d.userid +
                            "</td><td>" + d.addr + "</td><td>" + d.modifydate + "</td><td>" + d.createdate + "</td><td>" + d.paydate +
                            "</td><td>" + d.payType + "</td><td>" + d.num + "</td><td>" + getStatus(d.status) + "</td><td>" +
                            d.price + "</td><td>" + d.logisticsno + "</td><td>" + getRes(d.iscomment) +
                            "</td><td><button type='button' class='btn btn-primary btn-sm' id='del' code='" + d.id +
                            "'>删除</button></td></tr>")
                    })
                });
            };

            //点击删除事件
            order.on("click", '#del', function () {
                ids = $(this).attr("code");
                del();
                return false;
            });

            //删除商品的ajax
            function del() {
                var a = confirm("是否关闭该订单?");
                if (!a)
                    return;
                $.ajax({
                    url: "/applets/order/delete",
                    data: {"id": ids},
                    type: "post",
                    success: function (ur) {
                        alert(ur.msg);
                    }
                });
            };

            //订单状态
            function getStatus(s) {
                if (s == 0) {
                    return "关闭"
                } else if (s == 1) {
                    return "下单"
                } else if (s == 2) {
                    return "已付款"
                } else if (s == 3) {
                    return "已发货"
                } else if (s == 4) {
                    return "签收"
                } else if (s == 5) {
                    return "确认"
                }
            }

            //是否评价
            function getRes(q) {
                if (q == true) {
                    return "是";
                }
                return "否";

            }

            show();


        });
    </script>
</head>
<body>
<div class="container">
    <h2 class="text-center">订单展示</h2>

    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" href="/Menu.html">返回主菜单</a>
        </li>
    </ul>

    <form action="#" method="post">
        <div class="form-group">
            <label>订单状态</label>
            <label class="radio-inline"><input type="radio" name="status" value="0">关闭</label>
            <label class="radio-inline"><input type="radio" name="status" value="1">下单</label>
            <label class="radio-inline"><input type="radio" name="status" value="2">已付款</label>
            <label class="radio-inline"><input type="radio" name="status" value="3">已发货</label>
            <label class="radio-inline"><input type="radio" name="status" value="4">签收</label>
            <label class="radio-inline"><input type="radio" name="status" value="5">确认</label>
        </div>
        <div>
            <input type="button" id="button" value="搜索订单" class="form-control">
        </div>
    </form>
</div>

<div class="container">
    <table class="table table-striped" id="order">
        <thead>
        <tr>
            <th>ID</th>
            <th>商品</th>
            <th>用户号</th>
            <th>发货地址</th>
            <th>创建时间</th>
            <th>下单时间</th>
            <th>付款时间</th>
            <th>付款方式</th>
            <th>购买量</th>
            <th>订单状态</th>
            <th>价格</th>
            <th>物流单号</th>
            <th>是否已评价</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<div class="container offset-md-5">
    <ul class="pagination">
        <li class="page-item" id="first"><a class="page-link">首页</a></li>
        <li class="page-item" id="prev"><a class="page-link">上一页</a></li>
        <li class="page-item" id="next"><a class="page-link">下一页</a></li>
        <li class="page-item" id="last"><a class="page-link">尾页</a></li>
    </ul>
</div>

</body>
</html>